<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js/vue-2.5.21.js"></script>
    <link rel="stylesheet" href="./02 - 饿了么.css">
</head>

<body>
    <div id="root">
        <header>
            <input type="text" placeholder="输入商家，商品名称">
        </header>

        <main>
            <div class="banner"></div>

            <h3 style="margin-top: .625rem;margin-left: .3125rem;">猜你喜欢</h3>
            <div class="data">
                <span v-for="(item,index) in cai" @click="qiehuan(index)" :class="{active: gaoliang == index }">
                    {{item}}
                </span>
            </div>
            <div class="remai">
                <span v-for="(item,index) in re">
                    {{item}}
                </span>
            </div>

            <div class="jinbaiwan" v-for="(item,index) in jinbaiwan">
                <div class="jinbaiwan-image">
                    <img src="./R-C.gif" alt="">

                </div>
                <div class="jinbaiwan-right">
                    <h3>{{item.one}}</h3>
                    <p>月售{{item.yueshou}}</p>
                    <p class="nm">起送￥{{item.qisong}} 远距离配送￥{{item.peisong}} 分钟 {{item.fenzhong}}km</p>
                </div>
            </div>

            <!-- <div class="daoxiang">
                <div class="jinbaiwan-image">
                    <img src="./R-C.gif" alt="">
                </div>
                <div class="jinbaiwan-right" v-for="(item,index) in daoxiang">
                    <h3>{{item.one}}</h3>
                    <p>月售{{item.yueshou}}</p>
                    <p class="nm">起送￥{{item.qisong}} 远距离配送￥{{item.peisong}} 分钟 {{item.fenzhong}}km</p>
                </div>
            </div> -->
        </main>

        <footer>
            <div class="footer-f" v-for="(item,index) in gao" @click="qiehuanw(index)"
                :class="{active2: gaoliang2 == index }">
                {{item}}
            </div>



        </footer>
    </div>
</body>

</html>

<script>
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                gaoliang2: 0,
                gaoliang: 0,
                cai: ['综合排序', '距离最近', '销量最高', '筛选'],
                re: ['年货节热卖', '京铁联盟', '满减优惠', '品质联盟'],
                jinbaiwan: [
                    { img: './R-C.gif', one: '金百万烤鸭(苏家坨店)', qisong: 20, yueshou: 1632, peisong: 3, fenzhong: 47, qianmi: 3.9 },
                    { img: './R-C.gif', one: '稻金香源饺子馆', qisong: 20, yueshou: 1632, peisong: 3.5, fenzhong: 44, qianmi: 2.5 },
                ],

                gao: [
                    '首页', '我的', '订单'
                ]
            }
        },
        methods: {
            qiehuan(index) {
                this.gaoliang = index;
            },
            qiehuanw(index) {
                this.gaoliang2 = index;
            },
        },
    })
</script>